<template>
  <div>
    <div id="components-form-demo-advanced-search">
      <a-row :gutter="24" style="margin-bottom: 15px">
        <a-col :span="6">
          第三方标签：<a-input
          :maxLength="128"
            style="width: 60%"
            v-model="searchData.relevancySku"
          />
        </a-col>
        <a-col :span="6">
          SKU：<a-input :maxLength="128" style="width: 60%" v-model="searchData.sku" />
        </a-col>
        <a-col :span="6">
          入库仓库：
          <a-select
            show-search
            option-filter-prop="children"
            style="width: 60%"
            :filter-option="filterOption"
            v-model="searchData.warehousingId"
            allowClear
          >
            <a-select-option
              :value="item.warehouseId"
              v-for="item in clientWareHouse"
              :key="item.warehouseId"
            >
              {{ item.titleName }}
            </a-select-option>
          </a-select>
        </a-col>
        <a-col :span="6">
          <div v-show="!expand">
            <a-button
              type="primary"
              class="searchBtn"
              @click="
                () => {
                  getTabDataList();
                }
              "
            >
              查询
            </a-button>
            <a-button
              style="margin: 0 10px"
              type="primary"
              class="searchBtn"
              @click="resetSearch"
            >
              重置
            </a-button>
            <!-- <a
              :style="{ marginRight: '8px', fontSize: '14px' }"
              @click="expand = !expand"
            >
              {{ expand ? "折叠" : "展开" }}
              <a-icon :type="expand ? 'up' : 'down'" />
            </a> -->
          </div>
        </a-col>
      </a-row>
    </div>
    <a-spin tip="Loading..." :spinning="spinning">
      <a-table
        :columns="columns"
        :data-source="tableData"
        :pagination="false"
        :scroll="{ x: 1500 }"
      >
        <span slot="productTag" slot-scope="text, record">
          {{
            record.relevancySku === null
              ? record.productTag
              : record.relevancySku === ""
              ? record.productTag
              : record.productTag + "/" + record.relevancySku
          }}
        </span>
        <span slot="action" slot-scope="text, record">
          <a
            href="javascript:;"
            style="text-decoration: underline; color: rgb(41, 41, 224)"
            @click="freightSpaceInfo(record)"
            >仓位明细
          </a>
          <a-divider type="vertical" />
          <a
            href="javascript:;"
            style="text-decoration: underline; color: rgb(41, 41, 224)"
            @click="outPutInStorage(record)"
            >出入库记录
          </a>
        </span>
      </a-table>
    </a-spin>

    <!-- 分页器 -->
    <div style="margin: 20px 0; text-align: center">
      <a-config-provider>
        <a-pagination
          show-size-changer
          :pageSizeOptions="['10', '20', '30']"
          :show-total="
            (total) => `${$t('m.page.Total')} ${total} ${$t('m.page.items')}`
          "
          @showSizeChange="showChange"
          :buildOptionText="
            (props) => ` ${props.value} ${$t('m.page.a')}/${$t('m.page.page')}`
          "
          show-quick-jumper
          :current="searchData.current"
          :total="total"
          @change="onChangePage"
        />
      </a-config-provider>
    </div>
    <!-- //仓位明细模态框 -->
    <a-modal v-model="freightSpaceVisible" width="836px" title="仓位明细">
      <template slot="footer">
        <a-button
          style="background: #d7d7d7; color: #fff; border: none"
          @click="
            () => {
              this.freightSpaceVisible = false;
            }
          "
          >关闭</a-button
        >
        <!-- <a-button :loading="loading" type="primary" @click="freightSpaceSave"
          ></a-button
        > -->
      </template>
      <p>SKU：{{ freightSpace.sku }}</p>
      <p>产品名称：{{ freightSpace.skuName }}</p>
      <p>产品标签：{{ freightSpace.productTag }}</p>
      <a-table
        size="small"
        :columns="freightSpaceColumns"
        :data-source="freightSpace.listPr"
        :pagination="false"
      >
        <span slot="locationName" slot-scope="text, record">
          {{ record.locationName.replaceAll(",", "-") }}
        </span>

        <!-- <span slot="locationId" slot-scope="text, record">
          <a-cascader
            :disabled="record.remainingNumber * 1 === 0"
            style="width: 80%"
            size="small"
            change-on-select
            :options="storageLocation"
            @change="
              (value, selectedOptions) =>
                onChangeLocation(value, selectedOptions, record)
            "
            placeholder="请选择库位"
          />
        </span> -->
      </a-table>
    </a-modal>

    <!-- 出入库记录 -->
    <a-modal
      @cancel="cancelModal"
      v-model="outPutInStorageVisible"
      width="80%"
      title="出入库记录"
    >
      <template slot="footer">
        <a-button
          style="background: #d7d7d7; color: #fff; border: none"
          @click="cancelModal"
          >关闭</a-button
        >
      </template>
      <a-row :gutter="24" style="margin-bottom: 15px">
        <a-col :span="6">
          业务类型：
          <a-select
            size="small"
            style="width: 60%"
            v-model="outPutInStorageSarchData.recordType"
          >
            <a-select-option value="0"> 入库记录 </a-select-option>
            <a-select-option value="1"> 出库记录 </a-select-option>
            <a-select-option value="2"> 退件记录 </a-select-option>
            <a-select-option value="3"> 仓位迁入 </a-select-option>
            <a-select-option value="4"> 仓位迁出 </a-select-option>
          </a-select>
        </a-col>
        <a-col :span="6">
          仓位：
          <a-cascader
            style="width: 60%"
            size="small"
            change-on-select
            :options="storageLocation"
            v-model="storageLocationValue"
            @change="(value, selectedOptions) => onChangeOutPutInStorage(value)"
            placeholder="请选择库位"
          />
        </a-col>
        <a-col :span="6">
          操作日期：
          <a-range-picker
            size="small"
            style="width: 60%"
            v-model="modalDate"
            @change="onChangeModalDate"
          />
        </a-col>
        <a-col :span="6">
          <div v-show="!expand">
            <a-button
              size="small"
              type="primary"
              class="searchBtn"
              @click="
                () => {
                  outPutInStorage(currentRowObj);
                }
              "
            >
              查询
            </a-button>
            <a-button
              size="small"
              style="margin: 0 10px"
              type="primary"
              class="searchBtn"
              @click="outPutInStorageReset"
            >
              重置
            </a-button>
            <a-button
              size="small"
              style="margin: 0 10px"
              type="primary"
              class="searchBtn"
              @click="exportFile"
            >
              导出
            </a-button>
          </div>
        </a-col>
      </a-row>
      <a-spin tip="Loading..." :spinning="spinning">
        <a-table
          size="small"
          :columns="outPutInStorageColumns"
          :data-source="outPutInStorageData"
          :pagination="false"
        >
          <span slot="createTime" slot-scope="text, record">
            {{ record.createTime.replaceAll("T", "  ") }}
          </span>
        </a-table>
      </a-spin>
      <!-- 分页器 -->
      <div style="margin: 20px 0; text-align: center">
        <a-config-provider>
          <a-pagination
            show-size-changer
            :pageSizeOptions="['10', '20', '30']"
            :show-total="
              (total) =>
                `${$t('m.page.Total')} ${modalTotal} ${$t('m.page.items')}`
            "
            @showSizeChange="outPutInStorageShowChange"
            :buildOptionText="
              (props) =>
                ` ${props.value} ${$t('m.page.a')}/${$t('m.page.page')}`
            "
            show-quick-jumper
            :current="outPutInStorageSarchData.current"
            :total="modalTotal"
            @change="outPutInStorageChangePage"
          />
        </a-config-provider>
      </div>
    </a-modal>
  </div>
</template>

<script>
import { mapState } from "vuex";
import req from "@/utils/req";
import {
  bybehalf_stock,
  bybehalf_listpid,
  // bybehalf_upDateStock,
  bybehalf_pageRecord,
  bybehalf_excelOutbound,
} from "@/apis/system/StockManagement/Issuing";
import { warehouse_select } from "@/apis/common";
export default {
  created() {
    this.getTabDataList();
  },
  data() {
    return {
      spinning: false,
      modalDate: null,
      storageLocationValue: [],
      // 出入库记录数据
      outPutInStorageData: [],
      loading: false,
      //库位数据
      storageLocation: [],
      // 仓位明细列表
      freightSpace: {},
      //   仓位明细模态框
      freightSpaceVisible: false,
      //   出入库记录模态框
      outPutInStorageVisible: false,
      //   表格数据
      tableData: [],
      // 分页总条数
      total: 1,

      expand: false,
      //   页面搜索
      searchData: {
        current: 1,
        size: 10,
        sku: null,
        stockId: null,
        tenantId: null,
        warehousingId: null,
        relevancySku: null,
      },
      //   表格出入库模态框搜索
      outPutInStorageSarchData: {
        current: 1,
        endtDate: null,
        locationId: null,
        recordType: null,
        size: 10,
        startDate: null,
        tenantId: null,
        terminal: null,
        warehousingId: null,
        skuId: null,
      },
      modalTotal: 1,
      //每一行数据
      currentRowObj: {},
      pageSize: null,
    };
  },
  methods: {
    //取消模态框事件
    cancelModal() {
      this.outPutInStorageSarchData.current = 1;
      this.outPutInStorageVisible=false;
    },
    //导出当前页数据
    async exportFile() {
      let res = await bybehalf_excelOutbound(this.outPutInStorageSarchData);
      req.exportFile("出入库记录", res);
    },
    //出入库记录
    async outPutInStorage(record) {
      this.outPutInStorageSarchData.warehousingId = record.warehousingId;
      this.spinning = true;
      this.currentRowObj = record;
      this.outPutInStorageVisible = true;
      this.getStorageLocation(record.warehousingId);
      this.outPutInStorageSarchData.skuId = record.skuId;
      let { code, responseBody } = await bybehalf_pageRecord(
        this.outPutInStorageSarchData
      );
      if (code === "200") {
        this.outPutInStorageData = responseBody.records;
        this.modalTotal = responseBody.total * 1;
        this.spinning = false;
      }
    },
    //出入库记录重置按钮
    outPutInStorageReset() {
      let current = this.outPutInStorageSarchData.current;
      for (let key in this.outPutInStorageSarchData) {
        this.outPutInStorageSarchData[key] = null;
      }
      this.outPutInStorageSarchData.size = this.pageSize ? this.pageSize : 10;
      this.outPutInStorageSarchData.current = current;
      this.modalDate = null;
      this.storageLocationValue = [];
      this.outPutInStorage(this.currentRowObj);
    },
    //重置按钮
    resetSearch() {
      let current = this.searchData.current;
      for (let key in this.searchData) {
        this.searchData[key] = null;
      }

      this.searchData.size = 10;
      this.searchData.current = current;
      this.getTabDataList();
    },
    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text
          .toLowerCase()
          .indexOf(input.toLowerCase()) >= 0
      );
    },
    //分页器事件
    onChangePage(pageNumber) {
      this.searchData.current = pageNumber;
      this.getTabDataList();
    },
    //页码变更
    showChange(size, current) {
      this.searchData.current = size;
      this.searchData.size = current;
      this.getTabDataList();
    },
    //分页器事件
    outPutInStorageChangePage(pageNumber) {
      this.outPutInStorageSarchData.current = pageNumber;
      this.outPutInStorage(this.currentRowObj);
    },
    //页码变更
    outPutInStorageShowChange(size, current) {
      this.pageSize = current;
      this.outPutInStorageSarchData.current = size;
      this.outPutInStorageSarchData.size = current;
      this.outPutInStorage(this.currentRowObj);
    },
    //表格数据
    async getTabDataList() {
      this.spinning = true;
      let { code, responseBody } = await bybehalf_stock(this.searchData);
      if (code === "200") {
        responseBody.records.forEach((item) => {
          item.key = item.id;
        });
        this.tableData = responseBody.records;
        this.total = responseBody.total * 1;
        this.spinning = false;
      }
    },
    // 每一行仓位明细
    async freightSpaceInfo(record) {
      let { code, responseBody } = await bybehalf_listpid(record.id);
      if (code === "200") {
        this.freightSpace = responseBody;
      }
      this.getStorageLocation(record.warehousingId);
      this.freightSpaceVisible = true;
    },
    async getStorageLocation(id) {
      let { code, responseBody } = await warehouse_select({
        warehousePid: id,
        isTree: true,
      });
      if (code === "200") {
        this.storageLocation = this.getSkuTypeThree(responseBody);
      }
    },
    //封装组装后台数据
    getSkuTypeThree(data) {
      data.forEach((item) => {
        item.label = item.titleName;
        item.children = item.child;
        item.value = item.warehouseId;
        item.sort = this.sort;
        if (item.children && item.children.length >= 1) {
          this.sort += 1;
          this.getSkuTypeThree(item.children);
        }
      });
      this.sort = 0;
      return data;
    },
    // 改变库位
    onChangeLocation(value, selectedOptions, item) {
      item.newLocationId = value.join(",");
      let arr = [];
      selectedOptions.forEach((item) => {
        arr.push(item.titleName);
        item.newLocationName += item.titleName;
      });
      item.newLocationName = arr.join(",");
    },
    //模态框搜索库位改变
    onChangeOutPutInStorage(value) {
      this.outPutInStorageSarchData.locationId = value.join(",");
    },
    // 模态框时间改变
    onChangeModalDate(date, dateString) {
      this.outPutInStorageSarchData.startDate = dateString[0];
      this.outPutInStorageSarchData.endtDate = dateString[1];
    },
  },
  computed: {
    ...mapState(["clientWareHouse"]),
    columns() {
      return [
        // {
        //   title: "客户编号",
        //   dataIndex: "tenantId",
        //   align: "center",
        //   scopedSlots: { customRender: "tenantId" },
        //   width: "9%",
        // },
        {
          title: "仓库代码",
          dataIndex: "warehousingName",
          align: "center",
          scopedSlots: { customRender: "warehousingName" },
          width: "9%",
        },
        {
          title: "SKU",
          dataIndex: "sku",
          align: "center",
          width: "9%",
        },
        {
          title: "产品中英文名称",
          dataIndex: "skuName",
          // ellipsis: true,
          scopedSlots: { customRender: "recordList" },
          align: "center",
          width: "9%",
        },
        {
          title: "标签/第三方标签",
          dataIndex: "productTag",
          align: "center",
          width: "13%",
          scopedSlots: { customRender: "productTag" },
        },
        {
          title: "可用库存",
          dataIndex: "remainingNumber",
          scopedSlots: { customRender: "remainingNumber" },
          align: "center",
          width: "9%",
        },
        {
          title: "待出库库存",
          dataIndex: "frozenNumber",
          scopedSlots: { customRender: "frozenNumber" },
          align: "center",
          width: "9%",
        },
        {
          title: "总入库",
          dataIndex: "productNumber",
          align: "center",
          width: "9%",
          scopedSlots: { customRender: "productNumber" },
          // ellipsis: true,
        },
        {
          title: "总出库",
          dataIndex: "outboundNumber",
          scopedSlots: { customRender: "outboundNumber" },
          align: "center",
          width: "9%",
        },
        {
          title: "操作",
          dataIndex: "action",
          scopedSlots: { customRender: "action" },
          align: "center",
          width: "15%",
        },
      ];
    },
    freightSpaceColumns() {
      return [
        {
          title: "仓位",
          dataIndex: "locationName",
          align: "center",
          scopedSlots: { customRender: "locationName" },
          width: "25%",
        },
        {
          title: "可用库存",
          dataIndex: "remainingNumber",
          align: "center",
          scopedSlots: { customRender: "remainingNumber" },
          width: "25%",
        },
        {
          title: "待出库库存",
          dataIndex: "frozenNumber",
          align: "center",
          scopedSlots: { customRender: "frozenNumber" },
          width: "25%",
        },
        // {
        //   title: "分配新仓位",
        //   dataIndex: "locationId",
        //   align: "center",
        //   scopedSlots: { customRender: "locationId" },
        //   width: "25%",
        // },
      ];
    },
    outPutInStorageColumns() {
      return [
        {
          title: "业务类型",
          dataIndex: "type",
          align: "center",
          scopedSlots: { customRender: "type" },
          width: "14%",
        },
        {
          title: "SKU",
          dataIndex: "sku",
          align: "center",
          scopedSlots: { customRender: "sku" },
          width: "14%",
        },
        {
          title: "标签条码",
          dataIndex: "productTag",
          align: "center",
          scopedSlots: { customRender: "productTag" },
          width: "14%",
        },
        {
          title: "仓位",
          dataIndex: "locationName",
          align: "center",
          scopedSlots: { customRender: "locationName" },
          width: "14%",
        },
        {
          title: "SKU数量",
          dataIndex: "inputNumber",
          align: "center",
          scopedSlots: { customRender: "inputNumber" },
          width: "14%",
        },
        {
          title: "操作时间",
          dataIndex: "createTime",
          align: "center",
          scopedSlots: { customRender: "createTime" },
          width: "14%",
        },
        {
          title: "操作账号",
          dataIndex: "tenantId",
          align: "center",
          scopedSlots: { customRender: "tenantId" },
          width: "14%",
        },
      ];
    },
  },
};
</script>

<style lang="less" scoped>
.searchBtn {
  background: #fff;
  color: #3eae7c;
  text-shadow: none;
}
.searchBtn:hover {
  background: #3eae7c;
  color: #fff;
}
</style>
